//  创建整个应用路由器
import vueRouter from "vue-router";
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import News from "@/pages/News.vue";
import Messages from "@/pages/Message.vue";
import Details from "@/pages/Detail.vue";

export default new vueRouter({
    routes: [
        {
            name:'guanyu',
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'messages',
                    component: Messages,
                    children: [
                        {
                            name:'xiangqing',
                            path: 'detail/:id/:title',//占位符声明接收params参数
                            component: Details,
                            //props第一种写法 值为对象,该对象中的key-val会以props的形式传给Detail组件
                            // props:{a:1,b:'hello'}
                            //props第二种写法 值为bool值，若为真，会把路由组件接收到的params参数，传给Detail组件
                            // props:true
                            //props第三种写法 值为函数  {params:{id,title}}解构赋值
                            // props:function ({params:{id,title}}){
                            //     //相同简写方式
                            //     return {id,title}
                            //     //正常写法
                            //     // return {id:id,title:title}
                            // }
                            //正常写法
                            props:function ($route){
                                return {id:$route.params.id,title:$route.params.title}
                            }
                        }
                    ]
                },

            ]
        },

    ]

})


